<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字滚动效果从0开始滚动</title>
<style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
            background-color: #F6F6F6;
            font-weight: normal;
            font-family: "Microsoft YaHei";
            color: #333333;
        }
        .runNum{
            margin: 0 auto;
            padding: 0;
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            /* border-top: #CCCCCC solid 1px;
            border-bottom: #CCCCCC solid 1px; */
            text-align: center;
            font-weight: bold;
            position: relative;
        }
        .runNum>li,.pointstyl{
            list-style: none;
            width: 40px;
            float: left;
            position: absolute;
        }
    </style>
</head>
<body style="margin:0  auto;width:500px;">
<h2 style="">数字滚动效果从0开始滚动</h2>
<div style="margin: 50px auto;width: auto;font-size:44px;position:relative;">
<ul class="runNum" id="test"></ul>
<li class="pointstyl">.</li>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
    (function ($) {
    	/*jQuery对象添加  runNum  方法*/
        $.fn.extend({
            runNum:function (val,params) {
                /*初始化动画参数*/
                var valString = val || '70225800'
                var point = valString.toString(10).split('.')[1]?valString.toString(10).split('.')[1].length:0//小数小位数
                var unit = '1';
                for(var i = 0 ; i <point ; i++){
                    unit+='0'
                }
                var hex =  parseInt(unit)
                var par= params || {};
                var runNumJson={
                    el:$(this),//元素
                    value:valString,//数字
                    totalCount:valString*hex,
                    width:par.width || 40,//每一个的宽度
                    height:par.height || 50,//每一个的高度
                    interval:par.interval || 500,//定时刷新80最小值
                    // speed:par.speed || 80,//速度30最小值
                    length:(valString*hex).toString(10).length//数字的长度
                };
                // 处理小数显示
                $._runNum._list(runNumJson.el,runNumJson,point);
                $._runNum._interval(runNumJson.el.children("li"),runNumJson);
            }
        });
       

        /*jQuery对象添加  _runNum  属性*/
        $._runNum={
            /*初始化数字列表
            el:元素
            json:配置对象
            */
            _list:function (el,json,point) {
                // debugger;
                var str='';
                // 对每一位进行遍历
                for(var i=0; i<json.length;i++){
                    var w
                    if((json.length - point)<=i){
                      w  =json.width*i+json.width/3;//当前数字的left
                    }else{
                       w =json.width*i;//当前数字的left
                    }
                    var t=0;//当前数字的top
                    var h=json.height*10;//每一个数字的组高度
                    str +='<li cur = "0" style="width:'+json.width+'px;left:'+w+'px;top: '+-t+'px;height:'+h+'px;">';
                    for(var j=0;j<10;j++){
                        str+='<div style="height:'+json.height+'px;line-height:'+json.height+'px;">'+j+'</div>';
                    }
                        str+='<div style="height:'+json.height+'px;line-height:'+json.height+'px;">'+0+'</div>';
                    str+='</li>';
                    // debugger;
                    if(i==(json.length - point -1)&&point!=0){
                        $('.pointstyl').css({display:'block',width:json.width/3+'px',left:(w+json.width)+'px',top:0,height:h+'px'});
                        // str+='<div class="pointstyl" style="width:'+json.width/3+'px;left:'+(w+json.width)+'px;top: '+-t+'px;height:'+h+'px;">.</div>';
                    }else if(point==0){
                        $('.pointstyl').css('display','none')
                    }
                }
                el.html(str);
            },
            /*执行动画效果*/
            _animate:function (el,json) {
                 // debugger;
                 // 计算出每次移动的距离
                 var topPx=json.height;
                //  当前的数值
                 var temptop = parseInt(el.attr('cur'))+1
                 el.attr('cur',temptop)
                 //  对最后一位进行移动;判断是否移动到10了。
                 el.animate({top:-topPx*temptop+'px'},json.interval/10,'linear',function(){
                     $._runNum._interval(json.el.children("li"),json);
                 });
                  //如果移动整10，则移动到0处；它的上一位移动一下 
                  if(temptop==10){
                        el.attr('cur','0')
                        //移动到顶部
                           el.animate({top:0},0,"linear")
                        //前一位滚动一下
                        if(el.prev()){
                                $._runNum._animate(el.prev('li'),json)
                        }
                    }
               
            },
            /*刷新列表*/
            _interval:function (el,json) {
                    // 动画执行完成，清除计数器
                    if(json.totalCount<=0){
                    //执行动画 
                    }else {
                        $._runNum._animate(el.last(),json);
                        json.totalCount--;
                       
                    }
            }
        }
    })(jQuery);
</script>
<script type="text/javascript">
	$("#test").runNum(12.123);
</script>
</body>
</html>